<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div slot="title" class="header-title">
      <span>订单发货</span>
      <div class="orderInfo">
        <el-tag>用户: {{ meta.order && meta.order.memberName }}</el-tag>
        <el-tag>编号: {{ meta.order && meta.order.orderSn }}</el-tag>
      </div>
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <!-- 表单项 start -->
      <el-form-item
        label="快递公司"
        prop="expressProviderNo"
        :label-width="formLabelWidth"
      >
        <el-select
          v-model="form.expressProviderNo"
          placeholder="请选择快递公司"
          @change="selectExpressProviderChange"
        >
          <el-option
            v-for="item in expressProviders"
            :key="item.expressProviderNo"
            :label="item.expressProviderName"
            :value="item.expressProviderNo"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="快递单号"
        prop="expressNo"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="form.expressNo"
          placeholder="请输入快递单号"
        ></el-input>
      </el-form-item>
      <!-- 表单项 end -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate" :loading="loading"
        >确定发货</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import updateMixins from "@/views/base/updateMixins";

// 请求接口 start
import orderApi from "@/api/orderApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "updateOrderExpress",
  // 组件名称 end
  props: ["dialogTitle"],
  mixins: [updateMixins],
  data() {
    return {
      // 表格数据及校验规则 start
      initForm: {
        expressProviderName: "中通快递",
        expressProviderNo: "ZTO",
        expressProviderIcon: "https://www.zto.com/imgs/logo.png",
        expressNo: "",
      },
      form: {
        expressProviderName: "中通快递",
        expressProviderNo: "ZTO",
        expressProviderIcon: "https://www.zto.com/imgs/logo.png",
        expressNo: "",
      },
      rules: {
        expressNo: [
          {
            required: true,
            message: "请输入订单编号",
            trigger: "blur",
          },
        ],
      },
      // 表格数据及校验规则 end
      expressProviders: [
        {
          expressProviderName: "中通快递",
          expressProviderNo: "ZTO",
          expressProviderIcon: "https://www.zto.com/imgs/logo.png",
        },
        {
          expressProviderName: "圆通快递",
          expressProviderNo: "YTO",
          expressProviderIcon:
            "https://www.yto.net.cn/app/img/icon-logo.8f4131b.png",
        },
      ],
    };
  },
  methods: {
    // 数据详情 start
    remoteOtherData() {
      orderApi.express
        .infoByOrderId(this.meta.order.id)
        .then((res) => {
          if (res.data) {
            this.form = res.data;
          }
        })
        .catch((error) => {});
    },
    // 选中事件
    selectExpressProviderChange(val) {
      this.expressProviders.forEach((provider) => {
        if (provider.expressProviderNo == val) {
          this.form.expressProviderName = provider.expressProviderName;
          this.form.expressProviderIcon = provider.expressProviderIcon;
        }
      });
    },
    // 数据详情 end
    saveOrUpdate() {
      this.$refs["ruleForm"].validate((valid) => {
        var params = { ...this.form, ...this.meta };
        if (valid) {
          this.showLoading(true);
          if (!params.id) {
            orderApi.express
              .consignOrder(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.querySearchForm();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          } else {
            orderApi.express
              .update(params)
              .then((res) => {
                this.showDialog(false);
                this.$parent.querySearchForm();
              })
              .catch((error) => {
                this.showLoading(false);
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form .el-select {
  width: 100%;
}
:deep(.el-dialog__headerbtn) {
  top: 28px;
}
.header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .orderInfo {
    margin-right: 40px;
    .el-tag {
      margin-right: 5px;
    }
  }
}
</style>